<template>
  <div class="bd1">
    <div class="menu-container">
      <my-menu></my-menu>
    </div>
    <div class="table-container">
      <!-- 搜索框 -->
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="商家名">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入商家名"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="currentData" style="width: 100%">
        <el-table-column
          prop="b_id"
          label="商家ID"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="b_name"
          label="店铺名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="b_phone"
          label="电话"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="canteen_name"
          label="入驻地址"
          width="180"
        ></el-table-column>
        <el-table-column prop="b_photo" label="店铺照片" width="180">
          <template slot-scope="scope">
            <div>
              <img
                v-if="scope.row.b_photo"
                :src="'http://114.132.216.136:8080' + scope.row.b_photo"
                alt="店铺照片"
                style="width: 100%; height: auto"
              />
              <span v-else>暂无图片</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="removeUsers(scope.row.b_id)" type="text"
              >删除</el-button
            >
            <button
              @click="handleReview(scope.row)"
              type="text"
              :class="{
                'success-button': scope.row.pass_status === 1,
                'danger-button': scope.row.pass_status === 2,
                'default-button': scope.row.pass_status === 0,
              }"
            >
              {{
                scope.row.pass_status === 0
                  ? "待审核"
                  : scope.row.pass_status === 1
                  ? "已通过"
                  : "已拒绝"
              }}
            </button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :total="totalItems"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="prev, pager, next, jumper"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 审核状态弹窗 -->
    <el-dialog title="审核状态" :visible.sync="dialogVisible">
      <el-form :model="reviewForm">
        <el-form-item label="审核状态">
          <el-select
            v-model="reviewForm.pass_status"
            placeholder="请选择审核状态"
          >
            <el-option label="待审核" :value="0"></el-option>
            <el-option label="通过" :value="1"></el-option>
            <el-option label="拒绝" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateReviewStatus">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import menu from "../components/menu.vue";
import { getDelivery } from "@/utils/api/delivery";
import {
  allMerchantList,
  deleteMerchant,
  SearchMerchant,
  updateStatus,
  getApply,
} from "@/utils/api/getMerchant";

export default {
  components: {
    "my-menu": menu,
  },
  data() {
    return {
      deliveryData: [],
      totalItems: 0,
      pageSize: 10,
      currentPage: 1,
      searchForm: {
        title: "",
      },
      dialogVisible: false,
      reviewForm: {
        check_id: "",
        pass_status: 0,
      },
      currentData: [],
    };
  },
  methods: {
    setCurrentData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.currentData = this.deliveryData.slice(start, end);
      console.log("currentData", this.currentData);
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
      this.setCurrentData();
    },
    fetchData() {
      getApply().then((response) => {
        this.deliveryData = response.data.data;
        this.totalItems = this.deliveryData.length;
        this.setCurrentData();
      });
    },
    async removeUsers(newsId) {
      try {
        const confirmResult = await this.$confirm(
          "确认删除该商家吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        if (confirmResult === "confirm") {
          const res = await deleteMerchant(newsId);
          if (res.data.code === 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.fetchData();
          }
        }
      } catch (error) {
        // 用户点击取消时会抛出异常，可以忽略
      }
    },
    async handleSearch() {
      const res = await SearchMerchant(this.searchForm.title);
      this.currentData = res.data.data;
      this.totalItems = res.data.data.length;
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.currentData = res.data.data.slice(start, end);
    },
    handleReview(row) {
      console.log("row", row);
      this.reviewForm.check_id = row.check_id;
      this.dialogVisible = true;
    },
    async updateReviewStatus() {
      console.log("this.reviewFormffffff", this.reviewForm);
      const res = await updateStatus(
        this.reviewForm.check_id,
        this.reviewForm.pass_status
      );
      console.log("审核结果", res);
      if (res.data.code === 200) {
        this.$message({
          message: "审核状态更新成功",
          type: "success",
        });
        this.dialogVisible = false;
        this.fetchData();
      } else if (res.data.code === 500) {
        this.$message({
          message: "已审核，不能修改",
          type: "fail",
        });
        this.dialogVisible = false;
        this.fetchData();
      }
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style>
.bd1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: rgb(245, 252, 241);
  width: 100%;
  height: 781px;
  background-size: 100% 100%;
}

.menu-container {
  width: 200px;
}

.table-container {
  flex-grow: 1; /* 剩余空间 */
}
.demo-form-inline {
  margin-top: 30px;
  margin-left: 20px;
}
.success-button {
  color: #67c23a;
}

.danger-button {
  color: #f56c6c;
}
button {
  margin-left: 20px;
  padding: 10px 20px;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}
</style>
